 <template>
  <!-- 清洗合同 -->
  <view class="rinsePact">
    <view class="content">
      <view class="content-item">
        <view class="wrapper-content">
          <scroll-view
            scroll-y="true"
            @scrolltolower="scrollBottom"
            @scroll="scrollHeight"
            :style="[
              {
                height: '100%',
              },
            ]"
            v-if="dataSource.length"
          >
            <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
              <view class="md">
                <view class="line-hidden name">
                  {{ v.restaurantId_dictText }}
                </view>
                <view class="clause"> 提交时间：{{ v.createTime }} </view>
                <view class="clause">
                  到期时间：{{ formatters(v.dueDate, "YY/MM/DD") }}
                </view>
              </view>
              <view
                class="down"
                :data-url="`/selfInfo/rinsePact/addContract?data=${encodeURIComponent(
                  JSON.stringify(v)
                )}`"
                @click="handleClickRouter"
              >
                <view>
                  <image :src="baseImgUrl + 'det_icon.png'" mode="aspectFill"></image>
                </view>
                <view> 详情</view>
              </view>
            </view>
          </scroll-view>
          <view v-if="!dataSource.length">
            <u-empty
              mode="list"
              text="暂无内容！"
              :icon="baseImgUrl + 'no-icon2.png'"
            >
            </u-empty>
          </view>
        </view>
      </view>
    </view>

    <view class="btns">
      <button
        class="submit-btn"
        type="primary"
        :data-url="'/selfInfo/rinsePact/addContract'"
        @click="handleClickRouter"
        icon="map"
        style="width: 100%"
      >
        + 添加合同
      </button>
    </view>
  </view>
</template>

<script>
import { cleancontractPage } from "@/api/myself.js";
import { handleClickRouter, formatters } from "@/utils/util.js";

export default {
  name: "rinsePact",
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      form: {},
      errorType: ["none"],
      scrollTop: 0,
      dataSource: [],
      pageBottom: false,
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  onLoad() {
    this.scrollTop = 0;
    uni.removeStorageSync("scrollTop");

    this.pageConfig.pageNo = 1;
    this.dataSource = [];
    this.getList();
  },
  onShow() {
    this.scrollTop = uni.getStorageSync("scrollTop") || 0;
    uni.$on("rinsePact", (data) => {
      this.pageConfig.pageNo = 1;
      this.dataSource = [];
      this.getList();
    });
  },
  methods: {
    handleClickRouter,
    formatters,
    scrollHeight(e) {
      uni.setStorageSync("scrollTop", e.detail.scrollTop);
    },
    scrollBottom() {
      let current = (this.pageConfig.pageNo += 1);
      let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
      if (current <= pages) {
        this.getList();
      } else {
        this.pageBottom = true;
      }
    },
    getList() {
      let data = {
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };

      cleancontractPage(data).then((res) => {
        this.dataSource = this.dataSource.concat(res.result.records || []);
        this.pageConfig.total = res.result.total;
      });
    },
  },
};
</script>

<style lang="scss">
.rinsePact {
  flex: 1;
  background-color: #f9f9f9;

  .content {
    margin: 0 auto;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
    width: calc(100% - 35rpx);
    height: calc(100vh - 84px);
    overflow-y: auto;

    .content-item {
      background: #f9f9f9;
    }
  }

  .wrapper-content {
    height: calc(100vh - 84px);

    .wrapper-item {
      padding: 30rpx;
      padding-bottom: 0;
      background-color: #ffffff;
      margin-bottom: 20rpx;

      .md {
        border-bottom: 1rpx solid #e4e4e4;

        .name {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          margin-bottom: 17rpx;
        }

        .clause {
          margin-bottom: 20rpx;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #a1a1a1;
        }
      }

      .items {
        display: flex;
        .lt {
          width: 480rpx;
          max-width: 480rpx;
          .name {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: bold;
            margin-bottom: 17rpx;
          }

          .clause {
            margin-bottom: 17rpx;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #a1a1a1;
          }
        }

        .rt {
          align-self: center;
          width: 140rpx;
          height: 122rpx;
          margin-left: 30rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      .down {
        display: flex;
        justify-content: flex-end;
        padding: 20rpx 0;
        font-size: 28rpx;
        font-weight: 400;
        color: #bbbbbb;

        image {
          margin-right: 12rpx;
          width: 29rpx;
          height: 32rpx;
        }
      }
    }
  }
}
</style>
